console.log('popup.js inject start');
import sourceList from '/utils/source.json.js'

console.log('sourceList 音频文件列表',sourceList)
// console.log('>>> 默认随机图片default-img-url', 'https://img.paulzzh.com/touhou/random');


// layui.use(function () {
//     var $ = layui.$;
//     var form = layui.form;
//
//
//     let url = 'https://img.paulzzh.com/touhou/random'
//
//     // 表单取值
//     layui.$('#LAY-component-form-getval').on('click', async function () {
//         console.log('ssss', $('.origin-background')[0].value);
//         var data = { bgStr: $('.origin-background')[0].value, opacity: $('.opacity-input')[0].value }
//         // alert(JSON.stringify(data));
//         let index = layer.load()
//         url = data.bgStr.trim() == '' ? 'https://img.paulzzh.com/touhou/random' : data.bgStr.trim()
//         let opc = data.opacity * 1
//         const tab = await getCurrentTab();
//         await chrome.tabs.sendMessage(tab.id, { name: 'changeBg', url, opc });
//         layer.close(index)
//     });
//     layui.$('.font-button').on('click', async function () {
//         // const tab = await getCurrentTab();
//         // let weight = 900
//         // await chrome.tabs.sendMessage(tab.id, {name:'changeFont',weight});
//
//         // 发送请求
//         $.ajax({
//             method: "GET",
//             url: "http://127.0.0.1:5000",
//             success: (res) => {
//                 console.log('res', res);
//
//             },
//             fail: (f) => {
//                 console.log('f', f);
//
//             }
//         })
//     })
// })


// 获取当前tab标签
const getCurrentTab = async () => {
    let queryOptions = { active: true, currentWindow: true };
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
}

console.log('当前tab信息', getCurrentTab());

//  const tab = await getCurrentTab();
//  await chrome.tabs.sendMessage(tab.id, { color: "#" + obj.hex });

let chooseVoiceId = localStorage.getItem('chooseVoiceId') || ''
console.log('s',chooseVoiceId)

/**
 * @module popup页面逻辑交互
 *
 * 进入页面开始渲染列表
 *
 *
 * */

layui.use(['layer','form'],function (){
    var $ = layui.$;
    var layer = layui.layer;
    var form = layui.form;

    let selectVoice = $('#select-voice')[0]


    for (let i = 0; i < sourceList.voiceList.length; i++) {
        appendOptionSelectDom(sourceList.voiceList[i],i)
    }


    if(!chooseVoiceId){
    //     设置一个默认值存储本地
        chooseVoiceId = sourceList.voiceList[0].id
        localStorage.setItem('chooseVoiceId', chooseVoiceId)
    }

    function appendOptionSelectDom(sourceItem,index){
        let option = document.createElement('option')
        option.innerText = sourceItem.label
        option.value = sourceItem.id
        option.setAttribute('data-path', sourceItem.path)
        selectVoice.appendChild(option)
        if(chooseVoiceId && sourceItem.id == chooseVoiceId){
            option.setAttribute('selected', true)
        }
        form.render()
    }
    const tab = getCurrentTab();
    tab.then(async (tab) => {
        await chrome.tabs.sendMessage(tab.id, { name: 'changeVoice', path:sourceList.voiceList.find(i => i.id == chooseVoiceId).path });
    })

//     选择框选中触发事件
    form.on('select(voice)', function(data){
        console.log('select-voice',data.elem, data.value, data.othis);
        localStorage.setItem('chooseVoiceId', data.value)
        chooseVoiceId = data.value
        let index = layer.load()
        const tab = getCurrentTab();
        tab.then(async (tab) => {
            layer.close(index)
            let path = data.elem.options[data.elem.selectedIndex].getAttribute('data-path')
            console.log('path',path)
            await chrome.tabs.sendMessage(tab.id, { name: 'changeVoice', path });
        })
    })
})

function init(){

}

init()



